<%--
  Created by IntelliJ IDEA.
  User: ZZPTC
  Date: 2025/5/28
  Time: 15:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="./css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部 -->
<iframe name="header_iframe" onload="this.height=this.contentWindow.document.body.scrollHeight" width=100% src="./components/header.html" frameborder=0 scrolling="no"></iframe>
<!-- 主体 -->
<div class="mian">
  <div class="mian-center-box">
    <!-- 第一行 -->
    <div class="main-one">
      <!-- 分类 -->
      <div class="main-category">
        <div>
          <img src="img/index/bookmark_in_book.png" alt=""><span>图书音响、文具</span>
        </div>
        <div>
          <img src="img/index/Fork.png" alt=""><span>食品、饮料、酒水</span>
        </div>
        <div>
          <img src="img/index/Baby_Carriage.png" alt=""><span>母婴、玩具、童装</span>
        </div>
        <div>
          <img src="img/index/Double_Bed.png" alt=""><span>家居、家庭清洁、纸品</span>
        </div>
        <div>
          <img src="img/index/Adjust.png" alt=""><span>美妆、个人护理</span>
        </div>
        <div>
          <img src="img/index/winking_face.png" alt=""><span>女装、内衣</span>
        </div>
        <div>
          <img src="img/index/bookmark_in_book.png" alt=""><span>女鞋、男鞋、箱包</span>
        </div>
        <div>
          <img src="img/index/basket.png" alt=""><span>男装、运动</span>
        </div>
        <div>
          <img src="img/index/monitor.png" alt=""><span>手机、电脑、平板</span>
        </div>
        <div>
          <img src="img/index/Star.png" alt=""><span>礼品、充值</span>
        </div>
      </div>
      <!-- 轮播图 -->
      <div id="carouselExampleIndicators" class="carousel slide main-swiper" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img style="height:500px ;" src="img/shopping/ht.png" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item ">
            <img style="height:500px ;" src="img/shopping/nl3.png" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img style="height:500px ;" src="img/shopping/ht3.png" class="d-block w-100" alt="...">
          </div>

        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>
      <!-- 登陆状态 -->
      <div class="main-login-state">
        <!-- 请登录 -->
        <div class="login-text">
          <img src="./img/image(13).png" alt="">
          <div>Hi~请登录</div>
        </div>
        <!-- 登陆注册 -->
        <div style="display: flex;margin: 0 10px;">
          <a href="login.html">
            <button type="button" class="btn btn-size btn-warning">登陆</button>
          </a>
          <a href="register.html" style="margin-left: 10px;">
            <button type="button" class="btn btn-size btn-warning">注册</button>
          </a>
        </div>
        <!-- 新闻资讯 -->
        <div class="login-new">
          <div>
            <div>新闻资讯</div>
            <div>
              <font color="#838383">更多></font>
            </div>
          </div>
          <div>
            <div>[特惠]元旦狂欢来啦</div>
            <div>[特惠]元旦狂欢来啦</div>
            <div>[特惠]元旦狂欢来啦</div>
            <div>[特惠]元旦狂欢来啦</div>
            <div>[特惠]元旦狂欢来啦</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二行 -->

    <!-- 第三行 -->
    <div class="main-title2">商品推荐</div>
    <div class="main-three">
      <c:forEach var="product" items="${productList}">
        <div class="mian-shop-item">
        <!-- 商品图片 -->
        <a href="productInfoServlet?pid=${product.tpId}">
          <img style="width: 241px;height:238px" src="${product.tpFileName}" alt="">
        </a>
        <!-- 商品文字 -->
        <div class="mian-shop-text">
          <div>
            <font size="3">
              <b>
                <div class="shop-title-length">${product.tpName}</div>
              </b>
            </font>
          </div>
          <div>
            <font color="#868686">
              <div class="shop-describe-length">${product.tpDescription}</div>
            </font>
          </div>
          <div>
            <font color="#EF500C" size="3">
              <b>￥${product.tpPrice}</b>
            </font>
          </div>
        </div>
      </div>
      </c:forEach>
    </div>
    <!-- 加载更多 -->
    <div style="margin: 50px 0;">
      <center>
        <h4>
          <font color="#C08166">
            加载更多
          </font>
        </h4>
      </center>
    </div>
  </div>
</div>

<!-- 底部 -->
<iframe name="footer_iframe" onload="this.height=this.contentWindow.document.body.scrollHeight" width=100% src="./components/footer.html" frameborder=0 scrolling="no"></iframe>
<!-- 长度截取 -->
<script type="text/javascript">
  var new_playerName = "";
  $(".shop-title-length").each(function() {
    let count = 13 //长度截取
    var s1 = jQuery(this).text().length;
    console.log(s1);
    if (s1 > count) {
      new_playerName = jQuery(this).text().substring(0, count);
      new_playerName += "..."
      jQuery(this).html(new_playerName);
    } else {
      new_playerName = jQuery(this).text();
    }
    return new_playerName;
  })
  $(".shop-describe-length").each(function() {
    let count = 13 //长度截取
    var s1 = jQuery(this).text().length;
    console.log(s1);
    if (s1 > count) {
      new_playerName = jQuery(this).text().substring(0, count);
      new_playerName += "..."
      jQuery(this).html(new_playerName);
    } else {
      new_playerName = jQuery(this).text();
    }
    return new_playerName;
  })
</script>
</body>

</html>